<template>
  <table class="base-table" :width="width" ref="baseTable">
    <caption :style="{ textAlign: titleStyles.align, color: titleStyles.color, fontSize: titleStyles.fontSize}">
      {{ titleStyles.title }}
    </caption>
    <tbody>
      <tr v-for="(items, indexs) in data" class="move" :key="'items' + indexs" :style="{ height: height, lineHeight: height }">
        <td v-for="(item, index) in items" :key="'item' + index" :style="{ borderWidth: borders.width, borderStyle: borders.style, borderColor: borders.color, }">
          <div :style="{ width: nameStyles.width, color: nameStyles.color, fontSize: nameStyles.fontSize, textAlign: nameStyles.textAlign || colsStyles.nameAlign, backgroundColor: nameStyles.bgColor, }">
            {{ item.name || "&nbsp;" }}
          </div>
          <div :style="{ width: contentStyles.width, color: contentStyles.color, fontSize: contentStyles.fontSize, textAlign: contentStyles.textAlign || colsStyles.contentAlign, backgroundColor: contentStyles.bgColor, }">
            {{ item.content || "&nbsp;" }}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    // 表格宽度
    width: {
      type: String,
      default: '100%'
    },
    // 行高
    height: {
      type: String,
      default: '50px'
    },
    // 是否需要添加空白格
    isHasSpace: {
      type: Boolean,
      default: true
    },
    // 单元格边框
    border: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 标题
    titleStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 名称
    nameStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 内容
    contentStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 列数+对齐方式
    cols: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 数据
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      data: [],
      default: {
        border: {
          color: '#bfbfbf',
          width: '1px',
          style: 'solid'
        },
        titleStyle: {
          title: '标题',
          align: 'center',
          color: '',
          fontSize: ''
        },
        nameStyle: {
          width: '40%',
          color: '',
          fontSize: '',
          textAlign: '',
          bgColor: '#e7e6e4'
        },
        contentStyle: {
          width: '60%',
          color: '',
          fontSize: '',
          textAlign: '',
          bgColor: ''
        },
        cols: {
          cols: '2',
          nameAlign: 'center',
          contentAlign: 'center'
        }
      }
    }
  },
  computed: {
    titleStyles() {
      return this.$utils.formatProps(this.default.titleStyle, this.titleStyle)
    },
    borders() {
      return this.$utils.formatProps(this.default.border, this.border)
    },
    nameStyles() {
      return this.$utils.formatProps(this.default.nameStyle, this.nameStyle)
    },
    colsStyles() {
      return this.$utils.formatProps(this.default.cols, this.cols)
    },
    contentStyles() {
      return this.$utils.formatProps(this.default.contentStyle, this.contentStyle)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.handleData()
    })
  },
  watch: {
    list(newVal) {
      if (newVal) {
        this.handleData()
      }
    }
  },
  methods: {
    handleData() {
      if (this.list && this.colsStyles) {
        const length = this.colsStyles.cols || 2
        let newArr = []
        this.list.forEach((item) => {
          // 方法一
          if (
            !newArr.length ||
            (Array.isArray(newArr) &&
              newArr.length &&
              newArr[newArr.length - 1].length >= length)
          ) {
            newArr.push([])
            newArr[newArr.length - 1].push(item)
          } else {
            newArr[newArr.length - 1].push(item)
          }
          // 方法二
          // let num = Math.floor(index / length);
          // if (newArr[num]) {
          // 	newArr[num].push(item);
          // } else {
          // 	newArr[num] = [item];
          // }
        })
        const newLen = newArr?.length % length
        if (this.isHasSpace && newLen !== 0) {
          for (let i = 1; i <= length - newLen; i++) {
            newArr[newArr.length - 1].push({
              name: '',
              content: ''
            })
          }
        }
        this.data = newArr
      }
    }
  }
}
</script>

<style lang="less" scoped>
.base-table {
  margin: 0 auto;
  table-layout: fixed;
  caption {
    caption-side: top;
  }
  td {
    border: 1px #bfbfbf solid;
    div {
      display: inline-block;
      height: 100%;
      padding: 5px 10px;
      // 奇数列
      &:nth-child(odd) {
        background-color: #e7e6e4;
      }
      // 偶数列
      &:nth-child(even) {
      }
    }
  }
}
</style>
